  <template>
    <view class="u-content">
      <u-parse :html="content"></u-parse>
      <!-- 底部操作按钮 -->
      <view class="action-section">
        <u-button
          :type="isCountingDown ? 'default' : 'primary'"
          size="default"
          :disabled="isCountingDown"
          @click="navigateToTargetPage"
        >
          {{ isCountingDown ? `请等待 ${countdown} 秒` : '我已阅读，进入申请' }}
        </u-button>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        content: '',
        currentKey: '',
        // 倒计时相关状态
        countdown: 0,
        isCountingDown: false,
        countdownFinished: false,
        countdownTimer: null,
        // 页面路径映射，与首页保持一致
        pageRoutes: {
          'jobSubsidy': '/pages/jobSubsidy/index',
          'youthHostel': '/pages/youthHostel/index',
          'affordableHousing': '/pages/affordableHousing/index',
          'settlementSubsidy': '/pages/settlementSubsidy/index',
          'employmentSubsidy': '/pages/employmentSubsidy/index',
          'housingPurchaseSubsidy': '/pages/housingPurchaseSubsidy/index',
          'startupSubsidy': '/pages/startupSubsidy/index',
          'youthStartupLoan': '/pages/youthStartupLoan/index',
          'skillSubsidy': '/pages/skillSubsidy/index',
          'householdMove': '/pages/householdMove/index'
        }
      }
    },
    onLoad(options) {
      this.currentKey = options.key
      this.getPolicy()
      // 页面加载后自动开始倒计时
      this.startCountdown()
    },
    onUnload() {
      // 页面卸载时清理定时器
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
    },
    methods: {
      getPolicy() {
        this.$api.getConfigByKey(this.currentKey).then(res => {
          this.content = res.value
          // 设置标题
          uni.setNavigationBarTitle({
            title: res.title
          })
        }).catch(err => {
          console.error('获取配置失败:', err)
          // 如果获取配置失败，跳过倒计时，直接允许跳转
          this.countdownFinished = true
        })
      },
      // 完成阅读后跳转到目标页面
      navigateToTargetPage() {
        // 如果正在倒计时，不执行跳转
        if (this.isCountingDown) {
          return
        }

        // 如果倒计时还没完成，不允许跳转
        if (!this.countdownFinished) {
          return
        }

        const targetUrl = this.pageRoutes[this.currentKey]
        if (targetUrl) {
          // 跳转到目标页面
          uni.redirectTo({
            url: targetUrl
          })
        } else {
          uni.showToast({
            title: '页面路径未找到',
            icon: 'none'
          })
        }
      },
      // 开始倒计时
      startCountdown() {
        this.isCountingDown = true
        this.countdown = 5

        this.countdownTimer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            this.finishCountdown()
          }
        }, 1000)
      },
      // 完成倒计时，恢复按钮状态
      finishCountdown() {
        if (this.countdownTimer) {
          clearInterval(this.countdownTimer)
          this.countdownTimer = null
        }

        this.isCountingDown = false
        this.countdown = 0
        this.countdownFinished = true
        // 倒计时结束后，按钮变为可点击状态，用户需要手动点击跳转
      }
    }
  }
  </script>
  
  <style>
  page {
    height: 100%;
    overflow: hidden;
  }
  .u-content {
    height: 100%;
    padding: 20rpx;
    overflow: auto;
    padding-bottom: 120rpx; /* 为底部按钮留出空间 */
  }
  .action-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }

  /* 倒计时状态的额外样式 */
  .action-section .u-button--disabled {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    border-color: #ddd !important;
  }
  </style>
  